<template>
  <div>
    <h1>
    </h1>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">电商后台管理</el-breadcrumb-item>

      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <template>
      <el-table :data="goodsall.goods" style="width: 100%">
        <el-table-column type="index" ></el-table-column>
        <el-table-column prop="goodsname" label="商品名" width="100"></el-table-column>
        <el-table-column prop="price" label="商品价格" width="100"></el-table-column>
        <el-table-column prop="guige" label="商品规格" width="100"></el-table-column>
        <el-table-column prop="num" label="商品数量" width="100"></el-table-column>
        <el-table-column  label="商品图片">
           <template slot-scope="scope">
          <img
            :src="'http://localhost:3000/addimg/' + scope.row.goodsimg"
            width="40"
            height="40"
            class="head_pic"
          />
        </template>
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>
<script>
import { createNamespacedHelpers } from "vuex";
const {
  mapState,
  mapGetters,
  mapMutations,
  mapActions
} = createNamespacedHelpers("goods");
export default {
  data() {
    return {
    };
  },
  computed: {
    //通过计算属性获取数据
    ...mapState(["goodsall",""])
  },
  methods: {
    ...mapActions(["getgoods"]),
    indexMethod(index) {
      return index * 2;
    }
  },
  created() {
    this.getgoods();
  }
};
</script>

<style>
</style>